<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登陆注册</title>
  <link rel="stylesheet" href="assets/style.css">
  <link rel="stylesheet" href="assets/iconfont/iconfont.css">
</head>
<body>
<div id="app">
  <div class='container' id='container'>
    <div class="form-container sign-up-container" :model="sinMsg">
      <!-- 注册 -->
      <form action="#">
        <h1>用户注册</h1>
        <div class="social-container">
          <a href="#" class="social"><i class="iconfont icon-qq"></i></a>
          <a href="#" class="social"><i class="iconfont icon-weixin"></i></a>
          <a href="#" class="social"><i class="iconfont icon-weibo-copy"></i></a>
          <a href="#" class="social"><i class="iconfont icon-github"></i></a>
        </div>
        <span>您可以选择以上几种方式注册一个您的账户!</span>
        <input type="text" v-model="sinMsg.username" placeholder="用户名">
        <input type="password" v-model="sinMsg.password" placeholder="密码">
        <input type="email" v-model="sinMsg.email" placeholder="邮箱">
        <button @click="send_code">发送验证码</button>
        <input type="text" placeholder="验证码">
        <button @click="SubmitRegister">注册</button>
      </form>
    </div>
    <div class="form-container sign-in-container" :model="logMsg">
      <!-- 登陆 -->
      <form action="#">
        <h1>用户登陆</h1>
        <div class="social-container">
          <a href="#" class="social"><i class="iconfont icon-qq"></i></a>
          <a href="#" class="social"><i class="iconfont icon-weixin"></i></a>
          <a href="#" class="social"><i class="iconfont icon-weibo-copy"></i></a>
          <a href="#" class="social"><i class="iconfont icon-github"></i></a>
        </div>
        <span>您可以选择以上几种方式登陆您的账户!</span>
        <input type="text" v-model="logMsg.username" placeholder="用户名">
        <input type="password" v-model="logMsg.password" placeholder="密码">

        <a href="#">忘记密码？</a>
        <button @click="SubmitLogIn" id="sinIn">登陆</button>
      </form>
    </div>

    <!-- 侧边栏内容 -->
    <div class="overlay-container">
      <div class="overlay">
        <div class="overlay-panel overlay-left">
          <h1>已有帐号？</h1>
          <p>亲爱的快快点我去进行登陆吧。</p>
          <button class='ghost' id="signIn">登陆</button>
        </div>
        <div class="overlay-panel overlay-right">
          <h1>没有帐号？</h1>
          <p>点击注册去注册一个属于你的账号吧。</p>
          <button class='ghost' id="signUp">注册</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>



<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script src="index.js" defer></script>
<script src="js/element-ui/lib/index.js"></script>

<link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/iconfont/iconfont.css">
<script>
  new Vue({
    el:"#app",
    data(){
      return{
        logMsg:{
          username:'',
          password:'',
          email:''
        },
        sinMsg:{
          username:'',
          password:'',
          email:''
        }
      }
    },
    methods:{
      SubmitRegister(){
        console.log(this.sinMsg);
        var _this = this
        axios({
          method:"post",
          url:"http://localhost:8080/element/user/add",
          data:_this.sinMsg
        }).then(resp =>{
          console.log(resp.data);
          if(resp.data == "success"){
            _this.$message({
              showClose: true,
              message: '注册成功,3秒后跳转登录页面',
              type: 'success'
            });
            setTimeout("javascript:location.href='index.html'",3000);
          }else{
            _this.$message({
              showClose: true,
              message: '用户名已存在',
              type: 'error'
            });
          }
        })
      },
      SubmitLogIn(){
        console.log(this.logMsg);
        var _this = this
        axios({
          method:"post",
          url:"http://localhost:8080/element/user/selectByUsername",
          data:_this.logMsg
        }).then(resp =>{
          if(resp.data == "success"){
            window.location.href='brandDemo.html';
            _this.$message({
              showClose: true,
              message: '登录成功',
              type: 'success'
            });
          }else if(resp.data == 'admin'){
            window.location.href='brand.html';
            _this.$message({
              showClose: true,
              message: '登录成功',
              type: 'success'
            });
          }else {
            // window.location.href='indexdemo.html';
            _this.$message({
              showClose: true,
              message: '密码或用户名错误',
              type: 'error'
            });
          }


        })
      },
      send_code(){

      }
    },
    // mounted() {
    //
    //
    // },
  })
</script>
</html>